@import '../variable.less';

.bar-select {
  color: @text-color;
  display: inline-block;
  position: relative;
  cursor: pointer;

  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .bar-input {
    input {
      cursor: pointer;
    }
  }

  & &-options {
    width: 100%;
    padding: 8px 0;
    margin-top: 4px;
    border-radius: @border-radius-base;
    background-color: @white;
    box-shadow: @shadow-1-heavy;
    overflow: hidden;

    white-space: nowrap;
    color: @text-color;
    position: absolute;
    z-index: 2999;

    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;

    &.show {
      visibility: unset;
      opacity: 1;
      z-index: 2999;
      transition: all 0.3s;
    }

    & .bar-option {
      cursor: pointer;
    }
  }

  &-down-icon {
    transform: scale(0.5);
    transition: transform 0.25s;
  }

  &.is-focus {
    & .bar-select-options {
      visibility: unset;
      opacity: 1;
    }

    .bar-select-down-icon {
      transform: rotate(180deg) scale(0.5);
      transition: transform 0.25s;
    }
  }

  &.disabled {
    cursor: not-allowed;
    .bar-input {
      input {
        cursor: not-allowed;
      }
    }
  }
}
